<template>
    <div>
        <el-dialog :title="editTitle" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <el-form :model="roleForm" :rules="rules" ref="roleForm" label-width="100px">
                <el-form-item label="角色名" prop="name">
                    <el-input v-model="roleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-radio v-model="roleForm.status" :label="1">启用</el-radio>
                    <el-radio v-model="roleForm.status" :label="0">禁用</el-radio>
                </el-form-item>
                <el-form-item label="角色描述" prop="description">
                    <el-input type="textarea" :rows="4" v-model="roleForm.description" resize="none"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" type="primary" @click="submitForm('roleForm')"
                           icon="el-icon-document-checked"
                           :loading="loading">确 定</el-button>
                <el-button size="small" type="info" @click="resetForm('roleForm')"
                           icon="el-icon-refresh-left">重 置</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "RoleEdit",
        props: {
            editTitle: {
                type: String,
                default: "提示信息"
            },
            dialogVisible: {
                type: Boolean,
                required: true
            },
            rowData: {
                type: Object,
                required: false
            }
        },
        watch: {
            rowData: function (newVal, oldVal) {
                if (newVal && newVal.id) {
                    this.queryDataById(newVal.id);
                } else {
                    this.roleForm.id = null;
                }
            }
        },
        data() {
            return {
                loading: false,
                roleForm: {
                    id: '',
                    name: '',
                    description: '',
                    status: 1
                },
                rules: {
                    name: [
                        {required: true, message: '请输入角色名', trigger: 'blur'},
                        // {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                    ]
                }
            }
        },
        methods: {
            handleClose() {
                this.resetForm('roleForm');
                this.$emit("callBackFromSub", false);
            },
            submitForm(formName) {
                this.loading = true;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        delete this.roleForm.addTime;
                        delete this.roleForm.updateTime;
                        if (this.roleForm.id) {
                            this.$httpPut(this.$axiosBaseHttp, "api/rest/roleInfo/upd", this.roleForm).then(res => {
                                if (res.code === 200) {
                                    this.resetForm('roleForm');
                                    this.$emit("callBackFromSub", false);
                                    this.$successMsg(this.editTitle + "成功");
                                } else {
                                    this.$errorMsg(this.editTitle + "失败");
                                }
                                this.loading = false;
                            });
                        } else {
                            this.$httpPost(this.$axiosBaseHttp, "api/rest/roleInfo/save", this.roleForm).then(res => {
                                if (res.code === 200) {
                                    this.resetForm('roleForm');
                                    this.$emit("callBackFromSub", false);
                                    this.$successMsg(this.editTitle + "成功");
                                } else {
                                    this.$errorMsg(this.editTitle + "失败");
                                }
                                this.loading = false;
                            });
                        }
                    } else {
                        this.loading = false;
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            queryDataById(id) {
                this.$httpGet(this.$axiosBaseHttp, "api/rest/roleInfo/list", {id: id}).then(res => {
                    if (res.code === 200) {
                        this.roleForm = res.data[0];
                    }
                });
            }
        }
    }
</script>

<style scoped>

</style>